<template>
  <div class="category-wrapper">
    <div class="execute-box">
      <el-button @click="showDialog">新建</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        align="center"
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="分类名称"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="pname"
        label="上级分类">
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template v-slot="obj">
          <el-button type="primary" size="mini" @click="dialogVisible = true,findById(obj.row.id)">编辑</el-button>
          <el-button type="danger" size="mini" @click="dialogVisible1 = true,formData.id = obj.row.id">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="text-align: right; margin-top: 20px"
      background
      layout="prev, pager, next"
      :total="total"
      :currentPage="currentPage"
      :pageSize="pageSize"
      @current-change="pageChangeHandle">
    </el-pagination>

    <!--新建弹出框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="formData" :model="formData" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="上级id">
          <el-input v-model="formData.pid"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false,addOrUpdate()">确 定</el-button>
        </span>
    </el-dialog>
    <!--删除弹框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%">
      <el-form label-width="80px">
        <span>是否删除文件</span>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible1 = false,del()">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import obj from "./index.js"

  export default obj;
</script>

<style scoped lang="scss">
  @import "./index.scss";
</style>
